<template>
    <el-dialog
            title="查看"
            :visible="dialogVisible"
            @update:visible="setDialogVisible(false)"
            width="50%">
        <el-form :model="order" status-icon ref="ruleForm" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item label="订单编号" prop="orderSerial">
                <el-input v-model="order.orderSerial" readonly></el-input>
            </el-form-item>
            <el-form-item label="收货人" prop="orderConsignee">
                <el-input v-model="order.orderConsignee" readonly></el-input>
            </el-form-item>
            <el-form-item label="收货人电话" prop="orderPhone">
                <el-input v-model="order.orderPhone" readonly></el-input>
            </el-form-item>
            <el-form-item label="收货人地址" prop="orderAddress">
                <el-input v-model="order.orderAddress" readonly></el-input>
            </el-form-item>
            <ListSnapshot></ListSnapshot>
            <PageSnapshot :paginationObject="pagination" :paginationMethod="showSnapshot1"></PageSnapshot>
            <el-form-item>
                <el-button type="primary" @click="setDialogVisible(false)">确定</el-button>
                <el-button type="primary" @click="setDialogVisible(false)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
    import ListSnapshot from "../snapshot/ListSnapshot";
    import {mapState, mapMutations, mapActions} from "vuex";
    import PageSnapshot from "../snapshot/PageSnapshot";

    export default {
        components: {ListSnapshot,PageSnapshot},
        computed: {
            ...mapState("order", ["dialogVisible", "order"]),
            ...mapState("snapshot", ["pagination"])
        },
        methods: {
            ...mapMutations("order", ["setDialogVisible"]),
            ...mapActions("snapshot", ["showSnapshot1"]),
        }
    }
</script>

<style scoped>
.el-button{
    margin-left: 25%;
}
</style>